<!-- 退货管理--退货单表 -->
<template>
  <div class="returnGoods-list-box">
    <el-container class="template-box">
      <!-- tab搜索 -->
      <tabs
        class="tabs"
        :tabs-arr="indexTabsArr"
        :active-index="7"
        @returnIndex="tabsHandle" />
      <!-- 搜索 -->
      <el-header height="auto">
        <SearchForm
          label-width="110px"
          :data="indexSearchData"
          show-collapse
          :compact-data="indexSearchData.slice(0, 2)"
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading='submitLoading'
        />
      </el-header>
      <!-- 列表 -->
      <el-editable
        v-loading="submitLoading"
        :data="dataList"
        height="400"
        :columns="indexTableData"
      >
        <!-- 操作 -->
        <!-- 开票订单状态（1-待配送商审核，2-待发货，3-发货完成，4-已完成 , 5-已撤消，6-已拒绝）0-草稿？ -->
        <template
          slot="default-action"
          slot-scope="scope">
          <el-button
            v-if="[0].includes(scope.row.orderStatus)"
            size="small"
            @click.stop="toPush(scope.row, editPath)"
            type="text text-primary">编辑</el-button>
          <el-button
            v-if="[1].includes(scope.row.orderStatus)"
            size="small"
            @click.stop="toCancel(scope.row, editPath)"
            type="text text-primary">撤销</el-button>
          <el-button
            v-if="[2].includes(scope.row.orderStatus)"
            size="small"
            @click.stop="toPush(scope.row, changePath)"
            type="text text-primary">发货</el-button>
          <el-button
            size="small"
            @click.stop="toPush(scope.row, readPath)"
            type="text text-primary">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <pagination
        ref="page"
        :request-func="getList"
        @returnData="getTableData"
      />
    </el-container>
  </div>
</template>

<script>
import { indexSearchData, indexTableData, indexTabsArr } from './const'
import { hasIn, cloneDeep } from 'lodash'
import SearchForm from '@components/businesscomponents/search'
import ElEditable from '@components/el-editable'
import Pagination from '@components/custom-pagination'
import tabs from '@components/tabs/index.vue'
import {
  hspReturnGoodsList, // 医院-退货管理-退货单列表
  hspReturnGoodsCount, // 医院-退货管理-订单状态统计接口
  hspReturnGoodsRevoke // 医院-退货管理-撤销
} from '@const/beforeSettleApi'
export default {
  components: { ElEditable, SearchForm, tabs, Pagination },
  data () {
    return {
      isRequest: true,
      changePath: `${this.$route.path}/change`,
      readPath: `${this.$route.path}/read`,
      editPath: `/hospitalSide/returnOrderManage/newReturnOrder`,
      // 搜索标题字段
      indexSearchData,
      // 搜索返回内容
      searchData: {},
      // 表格loading
      tableLoading: false,
      // 列表数据
      dataList: [],
      // 列表表头
      indexTableData,
      // tab字段
      indexTabsArr: cloneDeep(indexTabsArr),
      submitLoading: false,
      tabIndex: ''
    }
  },
  mounted () {
    this.getNumber()
  },
  methods: {
    // 获取列表
    getList () {
      this.submitLoading = true
      const body = {
        ...this.searchData,
        orderStatus: this.tabIndex,
        ...this.$refs.page.page
      }
      return this.$axios.$post(hspReturnGoodsList, body)
    },
    // 获取列表数据
    getTableData (data) {
      this.dataList = data || []
      this.submitLoading = false
    },
    // tabs切换处理事件
    tabsHandle (index) {
      this.tabIndex = this.indexTabsArr[index].val === 'all' ? '' : this.indexTabsArr[index].val
      this.$refs.page.Refresh()
    },
    // 撤销
    async toCancel (data) {
      const body = {
        id: data.id
      }
      if (!this.isRequest) {
        return void this.$message.warning('请稍后操作')
      }
      try {
        this.isRequest = false
        const responseData = await this.$axios.$post(hspReturnGoodsRevoke, body)
        this.$refs.page.Refresh()
        this.getNumber()
      } finally {
        this.isRequest = true
      }
    },
    // 去发货/草稿编辑/已完成
    toPush (data, path) {
      this.$router.push({
        path,
        query: {
          id: data.id
        }
      })
    },

    // 获取订单数量
    async getNumber () {
      const res = await this.$axios.$post(hspReturnGoodsCount)
      let arr = hasIn(res, 'payload') ? res.payload : []
      const cloneIndexTabs = cloneDeep(indexTabsArr)
      // 获取对应tab值
      cloneIndexTabs.forEach(item => {
        arr.forEach(ite => {
          if (ite.orderStatus === item.val) {
            item.badge = { value: ite.orderCount || 0 }
          }
        })
      })
      // 全部数量
      let allCount = cloneIndexTabs.reduce((pre, next) => {
        return pre + next.badge.value || 0
      }, 0)
      ;[...cloneIndexTabs].pop().badge.value = allCount || null
      this.indexTabsArr = cloneIndexTabs
    },

    // 搜索功能-点击查询
    searchForm (condition) {
      this.searchData = condition
      this.$refs.page.Refresh()
      this.getNumber()
    },

    // 点击重置
    resetForm (condition) {
      this.searchData = condition
    }
  }
}
</script>

<style lang="less" scoped>
.returnGoods-list-box {
  .template-box {
    height: 100%;
    overflow: auto;
    /deep/.tabs .tabs-item {
      &.active {
        .item-font {
          font-size: 14px;
          transform: scale(1.3);
          transition: all 0.3s ease;
        }
      }
    }
  }
}
</style>
